<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雪碧图 </title>
  <style>
    
    div {
      width: 120px;
      height: 134px;
      overflow: hidden;
      display: inline-block;
      
    }
    img {
      position: relative;
    }
    .y img {
      left: -360px;
      top:  -535px;
    }
    
    .w img {
      left: -120px;
      top:  -535px;
    }
    
    .q img {
      left:    0px;
      top:  -401px;
    }
  </style>
</head>
<body>
  <div class="y">
    <img src="./img/abcd.jpg" >
  </div>
  <div class="w">
    <img src="./img/abcd.jpg" >
  </div>
  <div class="q">
    <img src="./img/abcd.jpg" >
  </div>
</body>
</html>

